<template>
  <view>
  <movable-area class="movable">
    <kefu :popShow="popShow" @closePop="popShow=false" />
    <movable-view :x="x" :y="y"  direction="all" class="movable-btn"  >
      <u-icon name="/static/public/kefu.png" size="40" @click="popShow=!popShow"></u-icon>
    </movable-view>
	<view class="content font_family" :style="{paddingTop:menuButtonInfo+'px'}">
		<!-- <view class="search f_j h5_search" @click="go_detail('/pagesA/index_menu/search')">
			<image class="icon" src="../../static/index/magnif.png" mode=""></image>
			<view class="pl">
				搜索喜欢的内容~
			</view>
		</view> -->
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper indicator indicatorMode='dot' keyName="image" height='306rpx' radius='24rpx' :list="list"
				@click="adClick"></u-swiper>
		</view>
		<!-- 更多标题 -->
		<more title="别人怎么玩" :tomore='false' url='/pagesA/hot/hot'></more>
		<scroll-view class="scroll_box" scroll-x="true">
			<view class="item" v-for="(item,index) in hot_list" :key="index"
				@click="go_detail('/pagesA/index_menu/guide_order_detail?id='+item.id)">
		 	     <view class="img_box">
					<image class="img" :src="item.image" mode="aspectFill">
					</image>	
							 	<!--
					<view class="tag f_zj">
						推荐
					</view> -->
				</view>
				<view class="title">
					{{item.title}}
				</view>
				<view class="price">
				<!-- 	<text class="text1">￥</text>
					<text class="text2">{{item.price}}</text> -->
					<text class="text3">参考</text>
				</view>
			</view>
			<view class="empty_top" v-if="hot_list.length==0">
				<u-empty text='没有数据啦~' icon="/static/public/kong.png">
				</u-empty>
			</view>
		</scroll-view>
		<!-- 限定 -->
	<!-- 	<more :title="'初夏限定篇'" :tomore='true' url='/pagesA/limit/limit'></more>
		<view class="prescribe">
			<view v-if="prescribe_list.length>0" class="item f" v-for="(item,index) in prescribe_list" :key="index"
				@click="go_detail('/pagesA/index_menu/record_detail?id='+item.id)">
				<view class="item_left">
					<image class="img" :src="item.image" mode="aspectFill">
					</image>
				</view>
				<view class="item_right f_d f_z_b">
					<view class="title">
						{{item.title}}
					</view>
					<view class="des">
						{{item.c_content}}
					</view>
					<view class="see f_j">
						<view class="see_left f">
							<view class="avatar_box" :style="{marginLeft:tj_index>=1?'-15rpx':0}"
								v-for="(tj_item,tj_index) in item.tj_user" :key='tj_index'>
								<image class="avatar" :src="tj_item.avatar" mode="aspectFill"></image>
							</view>
						</view>
						<view class="see_right">
							<text>{{item.view_nums}}</text>
							<text>人已看</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty_top" v-if='prescribe_list.length==0'>
				<u-empty text='没有数据啦~' icon="/static/public/kong.png">
				</u-empty>
			</view>
		</view>
		 -->
		
		<!-- 都在看 发布美食 啥啥的-->
		<!-- <more :title="'热门推荐'" :tomore='true' url='/pagesA/index_menu/food'></more>
		<view class="all" v-if="all_list.length>0">
			<waterfall v-for="(item,index) in all_list" :img='item'></waterfall>
		</view>
		<view class="empty_top" v-if='all_list.length==0'>
			<u-empty text='没有数据啦~' icon="/static/public/kong.png">
			</u-empty>
		</view>
		 -->
		<more :title="'导游列表'" :tomore='false' url='/pagesA/index_menu/guidedy'></more>
		<view class="all" v-if="all_list.length>0">
			<!-- <waterfall v-for="(item,index) in all_list" :img='item'></waterfall> -->
			<waterfalldy v-for="(item,index) in all_list" :img='item'></waterfalldy>
		</view>
		<view class="empty_top" v-if='all_list.length==0'>
			<u-empty text='没有数据啦~' icon="/static/public/kong.png">
			</u-empty>
		</view>
    <more title="探索更多" :tomore='false' ></more>
    <view class="recommend">



      <!-- 		index_menu/hotel
          strategy -->
      <view class="hot"  @click="go('/pagesA/index_menu/whotel?id='+tsgd[0].id)">
        <view class="img_box">
          <view class="hot_text">
            <!-- ...;;; -->
          </view>
          <image class="hot_img" :src="tsgd[0].image" mode="aspectFill">
          </image>

        </view>
        <view class="tip_box">
          <view class="tip_title f_j">
            <!-- <view class="title_text">{{hot_msg.title}}</view> -->
            <!-- <view class="tip_icon f_zj">
              <image class="icon" src="../../static/index/go_hot.png" mode=""></image>
            </view> -->
          </view>
          <view class="tip_content2">
            {{tsgd[0].title}}
          </view>
        </view>
      </view>

      <!-- 定制 pagesA/index_menu/strategy -->
      <!-- 	<view class="hot" v-if="hot_msg" @click="go('/pagesA/index_menu/strategy?id='+hot_msg.id)">
          <view class="img_box">
            <view class="hot_text">
              行程助手
            </view>
            <image class="hot_img" :src="hot_msg.image" mode="aspectFill">
            </image>
          </view>
          <view class="tip_box"> -->
      <!-- <view class="tip_title f_j"> -->
      <!-- <view class="title_text">{{hot_msg.title}}</view> -->
      <!-- <view class="tip_icon f_zj">
        <image class="icon" src="../../static/index/go_hot.png" mode=""></image>
      </view> -->
      <!-- </view> -->

      <!-- 	<view class="tip_content2">
          行程助手
        </view>
      </view>
    </view> -->

      <!-- 私人定制-->
      <!-- 	<view class="hot" v-if="hot_msg" @click="go('/pagesA/index_menu/tickets_detail?id='+hot_msg.id)">
          <view class="img_box">
            <view class="hot_text">
              私人定制
            </view>
            <image class="hot_img" :src="hot_msg.image" mode="aspectFill">
            </image>
          </view>
          <view class="tip_box">
            <view class="tip_title f_j"> -->

      <!-- <view class="title_text">{{hot_msg.title}}</view> -->
      <!-- <view class="tip_icon f_zj">
        <image class="icon" src="../../static/index/go_hot.png" mode=""></image>
      </view> -->
      <!-- 	</view>
        <view class="tip_content2">
          私人定制
        </view>
      </view>
    </view> -->


      <!-- 列表 -->

    </view>
    <kefu :movableHeight="movableHeight" :x="x" :y="y"></kefu>
	</view>
  </movable-area>
    <view class="p-safe" style="height: 180rpx"></view>
    <TabBar :tabIndex="3" />
  </view>
</template>

<script>
	import more from '@/components/more.vue'
	import waterfall from '@/components/waterfall_card.vue'
      import waterfalldy from '@/components/waterfall_carddy.vue'
	import { ad_list, activity_list, ad_click } from '@/api/index.js'
	import { lists } from '@/api/index_menu/index.js'
    import { guide_list,guidedy_list } from "@/api/index.js"
	import { mapState } from 'vuex'
  import TabBar from "../../components/TabBar.vue";
	export default {
		components: {
      TabBar,
			more,
			waterfall,
			waterfalldy,

		},
		computed: {
			...mapState(['user_info'])
		},
		data() {
			return {
        popShow:false,
        x:uni.getSystemInfoSync().windowWidth-50,
        y:uni.getSystemInfoSync().windowHeight/2+100,
				menuButtonInfo: 0,
				// 轮播图
				list: [],
				all_list: [],
				hot_list: [],
				prescribe_list: [],
        menu_action: 0,
        tsgd:[],
				query_data: {
					page: 1,
					search: '',
				},
			}
		},
    onPageScroll (e) {
      this.y=400+e.scrollTop
    },
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect().top
			// #endif
			// #ifdef H5
			this.menuButtonInfo = 20
			// #endif
			this.get_swiper()
			this.get_hot()
			this.get_prescribe()
			//this.get_all();// 美食推荐
			this.get_guide_list();
      this.get_tsgd_list()
		},
		onShareAppMessage() {
			return {
				path: `/pages/index/index?pid=${this.user_info.id}`
			}
		},
		onShareTimeline() {
			return {
				path: `/pages/index/index?pid=${this.user_info.id}`
			}
		},
		methods: {
      go(url) {
        uni.navigateTo({
          url
        })
      },
			adClick(e) {
				ad_click({ id: this.list[e].id }).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: this.list[e].tz_url,
							success: () => {

							},
							fail: () => {
								uni.switchTab({
									url: this.list[e].tz_url,
								})
							}
						})
					}
				})
			},
			go_detail(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取轮播图
			get_swiper() {
				let obj = {
					url: '/pages/shop/shop',
					position: 1
				}
				ad_list(obj).then(res => {
					this.list = res.data
				})
			},
			// 获取热门活动
			get_hot() {
				activity_list().then(res => {
					// console.log(res)
					if (res.code == 1) {
						this.hot_list = res.data.data
					}
				})
			},
			// 获取初夏限定列表
			get_prescribe() {
				lists({ type: 2, limit: 5 }).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.prescribe_list = res.data.data
					}
				})
			},
			// 获取大家都在看
			get_all() {
				lists({ type: 3, limit: 8 }).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.all_list = res.data.data
					}
				})
			},
			
			//导游列表
			// get_guidedypro_all() {
			// 	guidedy_list({ type: 3, limit: 8 }).then(res => {
			// 		console.log(res)
			// 		if (res.code == 1) {
			// 			this.all_list = res.data.data
			// 		}
			// 	})
			// },
      get_tsgd_list() {
        guide_list({
          limit: 6,
          flag:'noedit'
        }).then(res => {
          // console.log(res)

          this.tsgd=res.data.tsgd;
          const query = uni.createSelectorQuery().in(this);
          query.select('.content').boundingClientRect(data => {

            this.movableHeight = data.height
          }).exec();
        })
      },
			
			// 获取导游列表
			get_guide_list() {
				// this.status = 'loading'
				this.query_data.limit=6;
				guidedy_list(this.query_data).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							// this.guide_list = [...this.guide_list, ...res.data.data]
							this.all_list= res.data.data;
							// this.query_data.page += 1
							// this.status = 'loadmore'
						} else {
							// this.status = 'nomore'
						}
					}
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F8F9FC;
		min-height: 100vh;
		padding: 0rpx 30rpx 30rpx 30rpx;

		// padding-top: 100rpx;
		/* #ifdef H5 */
		.h5_search {
			width: 670rpx !important;
			box-sizing: border-box;

		}

		/* #endif */
		.search {
			width: 450rpx;
			// height: 68rpx;
			padding: 18rpx 24rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			.icon {
				width: 30rpx;
				height: 30rpx;
			}

			.pl {
				margin-left: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #BEBFC1;
			}
		}

		.swiper {
			margin-top: 32rpx;
		}

		.scroll_box {
			margin-top: 30rpx;
			width: 100%;
			height: 100%;
			white-space: nowrap;

			.item {
				margin-right: 20rpx;
				width: 600rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				overflow: hidden;
				display: inline-block;

				.img_box {
					position: relative;

					.img {
						vertical-align: bottom;
						width: 100%;
						height: 400rpx;
					}

					.tag {
						position: absolute;
						right: 0;
						top: 0;
						width: 82rpx;
						height: 33rpx;
						background: #F87415;
						border-radius: 0rpx 12rpx 0rpx 12rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 23rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				.title {
					padding: 2rpx 10rpx;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.price {
					margin-top: 6rpx;
					padding: 2rpx 10rpx;
					margin-bottom: 20rpx;
					font-family:  "Microsoft Yahei", sans-serif;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					.text1 {}

					.text2 {
						font-size: 32rpx
					}

					.text3 {
						color: #999999;
						margin-left: 8rpx;
					}
				}
			}
		}

		.prescribe {
			margin-top: 30rpx;

			.item {
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				margin-bottom: 30rpx;

				.item_left {
					.img {
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						width: 188rpx;
						height: 174rpx;
						vertical-align: bottom;
					}
				}

				.item_right {
					margin-left: 20rpx;

					.title {
						width: 420rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.des {
						width: 420rpx;
						background: #EFEFEF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #1E1E1E;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.see {
						.see_left {
							.avatar_box {
								width: 32rpx;
								height: 32rpx;
								border: 2rpx solid #ffffff;
								border-radius: 50%;
								overflow: hidden;

								.avatar {
									width: 32rpx;
									height: 32rpx;
								}
							}
						}

						.see_right {
							font-family:  "Microsoft Yahei", sans-serif;
							font-weight: 400;
							font-size: 20rpx;
							color: #666666;
							line-height: 23rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		// 都在看
		.all {
			margin-top: 30rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
			//column-count: 2;
			// column-gap: 20rpx;
		}
	}
  .recommend {
    //padding: 0rpx 30rpx;
    //margin-top: 50rpx;

    .recommend_menu {
      .menu_name_action {
        font-weight: 400;
        font-size: 40rpx;
        color: #232323;
        line-height: 47rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .tab_box {
        width: 100%;
        white-space: nowrap;
      }

      .tab_item {
        display: inline-block !important;
        padding-right: 60rpx;
      }

      .menu_name {
        font-weight: 400;
        font-size: 32rpx;
        color: #666666;
        line-height: 37rpx;
        text-align: left;
        font-style: normal;
        text-transform: none
      }

      .line {
        margin-top: 4rpx;
        width: 38rpx;
        height: 11rpx;
        background: #FFE706;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }

    .hot {
      width: 100%;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      overflow: hidden;
      margin-top: 20rpx;

      .img_box {
        position: relative;

        .hot_text {
          position: absolute;
          top: 20rpx;
          left: 30rpx;
          z-index: 1;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 47rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .hot_img {
          width: 100%;
          height: 258rpx;
          vertical-align: bottom;
        }
      }

      .hot_swiper {
        position: absolute;
        bottom: 10rpx;
        left: 30rpx;
        z-index: 1;
        width: 177rpx;
        height: 34rpx;
        background: #FFFFFF;
        border-radius: 10rpx 10rpx 10rpx 10rpx;

        .swiper_box {
          height: 34rpx;

          .swiper-item {
            padding-left: 5rpx;
            height: 100%;

            .text {
              font-weight: 400;
              font-size: 20rpx;
              color: #232323;
              line-height: 23rpx;
              text-align: left;
              font-style: normal;
              text-transform: none;
              margin-left: 5rpx;
            }
          }
        }
      }

      .tip_box {
        position: absolute;
        // background: #68612C;
        padding: 10rpx 20rpx 20rpx 20rpx;
        margin-top: -100rpx;

        .tip_title {
          .title_text {
            font-weight: 400;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .tip_icon {
            margin-left: 10rpx;
            width: 26rpx;
            height: 26rpx;
            border-radius: 50%;
            background-color: white;

            .icon {
              width: 9rpx;
              height: 16rpx;
            }
          }
        }

        .tip_content {
          margin-top: 5rpx;
          font-weight: 400;
          font-size: 40rpx;
          color: #FFFFFF;
          line-height: 26rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .tip_content2 {
          margin-top: -80rpx;
          font-weight: 400;
          font-size: 40rpx;
          color: #FFFFFF;
          text-align: left;
          font-style: normal;
          text-transform: none;
          width: 180rpx;
        }
      }
    }

    .list {
      margin-top: 20rpx;
      flex-wrap: wrap;
    }

    .hot_list {
      margin-top: 20rpx;
      white-space: nowrap;
      width: 100%;
    }
  }
</style>